<template>
  <div class="login">
    <group>
      <x-input placeholder="请输入手机号" type="tel" v-model="tel">
        <span slot="label">账&emsp;号：</span>
      </x-input>
      <x-input placeholder="请输入密码" type="password" v-model="pwd">
        <span slot="label">密&emsp;码：</span>
      </x-input>
      <x-input placeholder="验证码" type="number" v-model="code">
        <span slot="label">验证码：</span>
        <img ref="codeImg" slot="right-full-height" src="/index.php/api/user/verify?type=forget" alt="验证码" @click="codeImgClick">
      </x-input>
    </group>
    <agent-button class="login_btn" @btnClick="loginClick" :disabled="loginEnable">登录</agent-button>
    <div class="footer">
      <check-icon :value.sync="autoLogin">自动登录</check-icon>
      <router-link to="/findPwd">忘记密码？</router-link>
    </div>
  </div>
</template>
<script>
import { XInput, Group, CheckIcon, XButton } from "vux";
import AgentButton from "../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      tel: "",
      pwd: "",
      code: "",
      autoLogin: true
    };
  },
  components: {
    XInput,
    Group,
    AgentButton,
    CheckIcon,
    XButton
  },
  computed: {
    loginEnable() {
      if (this.tel && this.pwd && this.code) {
        return false;
      }
      return true;
    }
  },
  created() {},
  methods: {
    codeImgClick() {
      this.$refs.codeImg.src = `/index.php/api/user/verify?type=forget&r=${Math.random()}`;
    },
    loginClick() {
      this.apiService.user
        .login({
          username: this.tel,
          password: this.pwd,
          verifycode: this.code
        })
        .then(res => {
          this.apiService.setLocalData("userInfo", res.data);
          if (res.data.iscertification == 1) {
            this.$router.push("certification");
          } else {
            if (res.data.activation == 0) {
              this.$router.push("toBuyCard");
            } else {
              this.$router.push("/home");
            }
          }
        })
        .catch(() => {
          this.$refs.codeImg.src = `/index.php/api/user/verify?type=forget&r=${Math.random()}`;
        });
    }
  }
};
</script>

<style>
.login .vux-check-icon > span {
  font-size: 0.3rem;
}
</style>

<style scoped>
.login {
  background-color: #fff;
  height: 100%;
  text-align: center;
}
.login::before {
  content: "";
  display: table;
}
.login .footer {
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
}
.login .footer a {
  color: #000;
  font-size: 0.3rem;
}
.login_btn {
  margin: 0.5rem auto 0.3rem;
  width: 90%;
}
</style>


